<nz-table #nzTable [nzData]="listOfData" [nzLoading]="loading" [(nzPageSize)]="nzPageSize">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
        <tr>
            <th nzShowExpand class="details">详情</th>
            <th>姓名</th>
            <th>个人照</th>
            <th nzSortKey="username">学号</th>
            <th nzSortKey="grade">班级</th>
            <th nzSortKey="operate">操作</th>
            <th nzShowSort nzSortKey="status">状态</th>
        </tr>
    </thead>
    <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
            <tr>
                <td nzShowExpand [(nzExpand)]="mapOfExpandData[data.username]"></td>
                <td>{{ data.name }}</td>
                <td>
                    <img [src]="imageUrl + data.image" alt="" style="width:50px;cursor: pointer;" class="image" (click)="preview(imageUrl, data.image)">
                </td>
                <td>{{ data.username }}</td>
                <td>{{data.grade}}</td>
                <td>
                    <a nz-popconfirm nzTitle="暂时加入观察区？" (nzOnConfirm)="deleteTrial(data.username)" class="operate">
                        <button nz-button nzType="danger" nzSize="small">待定</button>
                    </a>
                    <a nz-popconfirm nzTitle="确定通过初审吗？" (nzOnConfirm)="firstTrial(data.username)" class="operate">
                        <button nz-button nzType="dashed" nzSize="small">初审</button>
                    </a>
                    <a nz-popconfirm nzTitle="成为正式成员？" (nzOnConfirm)="addMember(data.username)" class="operate">
                        <button nz-button nzType="default" nzSize="small">加入</button>
                    </a>
                </td>
                <td>{{ data.state}}</td>
            </tr>
            <tr [nzExpand]="mapOfExpandData[data.username]">
                <td></td>
                <td colspan="4">
                    <table>
                        <tr>
                            <td>性别：{{data.sex}}</td>
                            <td>联系电话：{{data.phoneNumber}}</td>
                        </tr>
                        <tr>
                            <td>学习方向：
                                <span *ngIf="data.directionId === 1">web前端</span>
                                <span *ngIf="data.directionId === 2">web后端</span>
                                <span *ngIf="data.directionId === 3">UI设计</span>
                                <span *ngIf="data.directionId === 4">人工智能</span>
                                <span *ngIf="data.directionId === 5">大数据</span>
                            </td>
                            <td>qq：{{data.qq }}</td>
                        </tr>
                        <tr>
                            <td>微信：{{data.weChat}}</td>
                            <td>自我介绍：{{data.comment}}</td>
                        </tr>
                    </table>
                </td>
                <td></td>
                <td></td>
            </tr>
        </ng-template>
    </tbody>
</nz-table>

<div class="imgpreview-box" id="imgpreviewbox">
    <img [src]="imgpreview" alt="" class="imgpreview" />
    <div class="imgicon-box">
        <i nz-icon nzType="close-circle" nzTheme="fill" class="imgicon" (click)="imgicon()"></i>
    </div>
</div>


<div style="width:100%;text-align:center">
    <button nz-button nzType="dashed" (click)="deriveXlsx()">导出通过初审表单</button>
</div>